<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
		// userAgent
		(() => {
			if ((window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
				//移动端浏览
				window.location.href="./mobile_index.html#/";
			}
		})()
	</script>
    <link rel="stylesheet" type="text/css" href="../../style/libs/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../style/libs/swiper-3.4.2.min.css">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
        body{
            margin: 0;
            background-color: #F4F4F4;
        }
        dl,dt,dd,ul,li{
            margin:0;
            padding: 0;
            list-style: none;
        }
        h2{
            font-size: 16px;
            color: olive;
            font-weight: bold;
            background-color: lightcyan;
            text-align: center;
            padding: 5px;
        }
        .wrap{
            width: 363px;
            height: 738px;
            margin: 0 auto;
            background: url("../../images/section_help_step-4de3fd13.jpg") center top no-repeat;
            background-size: 600px 956px;
            position: relative;
        }
        .container{
            width: 320px;
            height: 568px;
            border: 1px solid #000;
            padding: 0;
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        header{
            width: 100%;
            height: 54px;
            background-color: yellow;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
        }
        header>span:nth-of-type(1){
            cursor: pointer;
            height: 54px;
            line-height: 54px;
        }
        header>span:nth-of-type(2)>i{
            font-size: 20px;
            display: block;
            margin-top: 10px;
        }
        header>span:nth-of-type(2){
            cursor: pointer;
            width: 50px;
            float: right;

        }
        article{
            width: 100%;
            height: 464px;
            margin-top: 54px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        article>div{
            width: 100%;
            min-height: 484px;
        }
        .swiper-container {
            width: 100%;
            height: 114px;
        }
        .slide_img{
            width: 100%;
            height: 100%;
        }
        .swiper-button-prev,.swiper-button-next{
            width: 26px;
            height: 26px;
            margin: -10px 10px;
            display: none;
        }
        .swiper-container:hover .swiper-button-prev,
        .swiper-container:hover .swiper-button-next{
            display: block;
        }
        .index_menu{
            width: 100%;
            /*height: 66px;*/
            margin: 10px 0;
            background: white;
        }
        .index_menu>ul{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .index_menu>ul>li{
            width: 50px;
            /*height: 56px;*/
            font-size: 10px;
            display: inline-block;
            text-align: center;
            margin: 5px;
            cursor: pointer;
        }
        .index_menu>ul>li>img{
            width: 50px;
        }
        .hot_sale_data,.quick_buy{
            width: 100%;
            /*height: 66px;*/
            margin: 10px 0;
            background: white;
            font-size: 10px;
        }
        .hot_sale_data>ul,.quick_buy>ul{
            width: 100%;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            font-family: "SimSun";
        }
        .hot_sale_data>ul>li,.quick_buy>ul>li{
            width: 150px;
            display: inline-block;
            width: 50%;
            border: 1px solid white;
            cursor: pointer;
            /*border: 1px solid lightgray;*/
        }
        .hot_sale_data>ul>li:nth-of-type(2n){
            background-color: lightblue;
            border-left: 1px solid lightgray;
        }
        .hot_sale_data>ul>li:nth-of-type(2n+1){
            background-color: rgba(150,150,0,0.3);
        }
        .hot_sale_data>ul>li>img,.quick_buy>ul>li>img{
            width: 100%;
            border-bottom: 4px solid lightgreen;
            margin-bottom: 5px;
        }
        .soon_tobuy{
            background-color: orange;
        }
        .del_price{
            text-decoration: line-through;
        }
        .now_price{
            border: 1px solid orange;
            color: darkred;
            border-radius: 5px;
            padding: 0 5px;
        }
        .quick_buy .buy_button{
            border-radius: 6px;
            outline: none;
        }



        .footer_data{
            width: 100%;
            height: 50px;
        }
        .footer_data>ul{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
        }
        .footer_data>ul>li{
            cursor: pointer;
        }
        .footer_data>ul>li>span{
            display: block;
            text-align: center;
            padding-top: 5px;
        }
        .footer_data>ul>li:hover span:nth-of-type(1){
            color: orange;
        }
    </style>
</head>
<body ng-controller="myCtrl">
    <div class="wrap">
        <div class="container"> 
            <header>
                <span>深圳<span class="glyphicon glyphicon-map-marker"></span></span>
                <span><i class="glyphicon glyphicon-search"></i>搜索</span>
            </header>
            <article>
                <div>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" ng-repeat="item in arrSlideImg">
                                <img class="slide_img" src="{{item.activity.img}}" title="{{item.activity.name}}">
                            </div>
                        </div>
                          
                          <!-- 导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                    <div class="index_menu">
                        <ul>
                            <li ng-repeat="item in menu">
                                <img src="{{item.activity.img}}">
                                {{item.activity.name}}
                            </li>
                        </ul>
                    </div>
                    <div class="hot_sale_data">
                        <h2>热卖精品</h2>
                        <ul>
                            <li ng-repeat="item in hotSaleData" num="{{item.id}}">
                                <img src="{{item.img}}" alt="">
                                <dl>
                                    <dt>{{item.name}}</dt>
                                    <dd>{{item.specifics}}</dd>
                                    <dd><span class="del_price">原价：{{item.market_price | currency:"￥"}}</span>
                                    <br/>
                                    <span class="now_price">现价{{item.price | currency:"￥"}}</span></dd>
                                    <dd>{{item.pm_desc}}</dd>
                                    <dd>{{item.pm_info}}</dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                    <div class="quick_buy">
                        <h2>秒杀-开始{{quickBuy.dateTime}}</h2>
                        <ul>
                            <li ng-repeat="item in quickBuy.product">
                                <img src="{{item.img}}" alt="">
                                <dl>
                                    <dt>{{item.name}}</dt>
                                    <dd>{{item.specifics}}</dd>
                                    <dd><span class="del_price">原价：{{item.market_price | currency:"￥"}}</span>
                                    <br/>
                                    <span class="now_price">现价：{{item.price | currency:"￥"}}</span></dd>

                                    <dd>{{item.enable?"正在进行秒杀":"请耐心等待"}}</dd>
                                    <dd>
                                        <button class="buy_button" ng-class="{true:'soon_tobuy',false:''}[item.enable]" ng-click="">{{item.enable?"马上抢购":"即将开抢"}}</button>
                                    </dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>


            </article>
            <footer class="footer_data">
                <ul>
                    <li>
                        <span class="glyphicon glyphicon-home"></span>
                        <span>首页</span>
                    </li>
                    <li>                   
                        <span class="glyphicon glyphicon-flash"></span>
                        <span>闪送超市</span>
                    </li>
                    <li>                   
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                        <span>购物车</span>
                    </li>
                    <li>                   
                        <span class="glyphicon glyphicon-user"></span>
                        <span>我的</span>
                    </li>
                </ul>
            </footer>
        </div>
    </div>
</body>
<script type="text/javascript">
    /*
*页面动画加载器
*
*将文件引入body 结束标签的下面
*
*建议：为更换展示加载时间，引入的其他第三方js 库也应该在本文件引入的下面
*/ 



let onload_style = document.createElement("style");
onload_style.innerHTML = `
    @keyframes onload_show{
        form{
            background-size: 100%;
            opacity: 1;
        }
        to{
            background-size: 80%;
            opacity: 0.3;
        }
    }


    `;
let onload_wrap = document.createElement("div");
onload_wrap.style = `
    background-color : yellow;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    z-index: 999;
    `;
let onload_loading = `
    <div
        style = "
        width: 60%;
        height: 40%;
        position: absolute;
        top:10%;
        right:0;
        left:0;
        margin: auto;
        background: url('') center no-repeat;
        background-size: 100%;
        ">
    </div>
    <div
        style = "
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin: auto;
        background: url('') center no-repeat;
        background-size: 100%;
        
        animation: onload_show 0.3s alternate infinite;
        ">
        
    </div>
    <span
        style="
        width: 80px;
        height:80px;
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin: auto;
        font-size: 20px;
        font-weight: bolder;
        padding-top: 70px;
        "
        >loading···</span>`;

let indexHead = document.documentElement.querySelector("head");
let indexBody = document.body.querySelector('.container');
onload_wrap.innerHTML=onload_loading;
indexHead.insertBefore(onload_style,indexHead.firstElementChild);
indexBody.insertBefore(onload_wrap,indexBody.firstElementChild);

window.onload = ()=>{
    setTimeout(()=>{
        onload_wrap.style.display = 'none';
    },3000)
}
</script>
<script type="text/javascript" src="../../js/libs/swiper-3.4.2.min.js"></script>
<script>        
    var mySwiper = new Swiper ('.swiper-container', {
       
         observer:true,
         loop: true,
        
        // 前进后退按钮
         nextButton: '.swiper-button-next',
         prevButton: '.swiper-button-prev',
    })   

    setInterval("mySwiper.slidePrev()", 2000);     
</script>

<script type="text/javascript" src="../../js/libs/angular.min.js"></script>
<script type="text/javascript">
    let app = angular.module("myApp",[]);
    app.controller("myCtrl",["$scope","$http",function($scope,$http){
        // initial data 

        $scope.arrSlideImg =[];
        $scope.menu = [];

        $scope.hotSaleData = [];

        $scope.quickBuy = [];
        // get position
        // $scope.location = "";
        /*let location = navigator.geolocation;
        location.getCurrentPosition(data=>{
            console.log(data.coords.accuracy)
            $scope.location = data.coords.accuracy;
        })*/

// 轮播图 和 菜单
        $http.get("http://h5.yztctech.net/api/axf/apihome.php").success(data => {
                $scope.arrSlideImg = data.data.slide;
                $scope.menu = data.data.menu;
        })
// 热卖数据
        $http.get("http://h5.yztctech.net/api/axf/apihomehot.php").success(data => {
            $scope.hotSaleData = data.data;
        })
// 秒杀数据

        $http.get("http://h5.yztctech.net/api/axf/apimiaosha.php").success(data => {
            $scope.quickBuy = data;
        })





    }])
    
    
</script>
</html>